<template>
  <div class="cardContainer2" style="width: 100%">
    <div class="card2 h-62 p-2" style="width: 100%; height: 70vh; overflow-y: auto">
      <div class="flex items-center p-4 border-b" v-for="z in zs" :key="z">
        <div class="mt-4 mr-4 text-center p-2 w-22">
          <el-badge :value="z.level" class="item" type="primary">
            <img :src="getzsicon(z.name)" alt="正方形图片" style="width: auto; height: 50px; margin: 0 auto" />
          </el-badge>
          <div class="mt-2">{{ z.category }}</div>
        </div>
        <div class="p-2 h-26 w-80">
          <p class="mt-1 text-xl font-semibold whitespace-nowrap">{{ z.name }}</p>
          <p class="mt-2 text-sm">{{ z.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  zs: Array, // Define qweather as an object prop
});

function getzsicon(info) {
  console.log('info', info);
  if (info === '运动指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/yundong.png';
  }
  if (info === '洗车指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/xiche.png';
  }
  if (info === '穿衣指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/chuanyi.png';
  }
  if (info === '钓鱼指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/钓鱼.png';
  }
  if (info === '紫外线指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/ziwaixian.png';
  }
  if (info === '旅游指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/旅游.png';
  }
  if (info === '过敏指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/撒花粉.png';
  }
  if (info === '舒适度指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/shushidu.png';
  }
  if (info === '感冒指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/ganmao.png';
  }
  if (info === '空气污染扩散条件指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/kongqizhiliang.png';
  }
  if (info === '空调开启指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/空调.png';
  }
  if (info === '太阳镜指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/glasses.png';
  }
  if (info === '化妆指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/化妆盒.png';
  }
  if (info === '晾晒指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/taiyang.png';
  }
  if (info === '交通指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/交通.png';
  }
  if (info === '防晒指数') {
    return 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/防晒.png';
  }
}
</script>
<style scoped lang="less"></style>
